<template>
  <div>
    <router-link to="/index/bingrenlist">我的病人</router-link>
    <div class="bigwhite"  v-if="porieList.length>0">
      <el-row>
        <el-col :span="6">
          <el-input
            placeholder="请输入病人名字"
            suffix-icon="el-icon-search"
            v-model="words"
            class="borderRiuas"
            round
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, i) in search" :key="item.id"
          ><div class="grid-content bg-purple" @click="delcoose(i)">
            <el-row :gutter="15" :class="['boxShow',item.blo?'borders':'',item.color?'borderser':'']">
              <el-col :span="12" class="bgradius"
                ><div class="grid-content bg-purple">
                  <img :src="item.imgUrl" alt="" /></div
              ></el-col>
              <el-col :span="12"
                ><div class="grid-content bg-purple">
                  <p>姓名：{{ item.name }}</p>
                  <p>性别：{{ item.sex == 1 ? "男" : "女" }}</p>
                  <p>年龄：{{ item.age }}</p>
                  <p>序号：{{ item.num }}</p>
                  <p>
                    <i class="el-icon-view" @click="view(i)"></i>
                    <i class="el-icon-edit" @click="edit(i)"></i>
                    <i class="el-icon-delete" @click="del(i)"></i>
                  </p></div
              ></el-col>
            </el-row></div
        ></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3"
          ><el-button type="success" @click="chek">批量选择</el-button></el-col
        >
        <el-col :span="3"><el-button type="danger" @click="delmany">批量删除{{currentPage3}}</el-button></el-col>
        <el-col :span="10"
          ><div class="block">
            <el-pagination
              @size-change="handleSizeChange"
             
              :current-page.sync="currentPage3"

         
               @current-change="handleCurrentChange"
      


              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            >
            </el-pagination></div
        ></el-col>
      </el-row>
    </div>
      <div class="bigwhite" v-else>
             没有任何数据
    </div>
  </div>
</template>

<script>

export default {
  name: "Bingrenlist",
  data() {
    return {
      // consultationId:2,
      words: "",
      porieList: [
        {
          id: 1,
          imgUrl: require("../../assets/img/patient_pic.png"),
          name: "赵某人",
          sex: 1,
          age: 21,
          blo:false,
          color:false,
          num: 85854,
        },
        {
          id: 2,
          imgUrl: require("../../assets/img/patient_pic.png"),
          name: "李某人",
          sex: 0,
          age: 55,
          blo:false,
          color:false,
          num: 85854,
        },
        {
          id: 3,
          imgUrl: require("../../assets/img/patient_pic.png"),
          name: "王某人",
          sex: 1,
          age: 44,
          blo:false,
          color:false,
          num: 85854,
        },
        {
          id: 4,
          imgUrl: require("../../assets/img/patient_pic.png"),
          name: "李刀",
          sex: 1,
          age: 65,
          blo:false,
          color:false,
          num: 85854,
        },
        {
          id: 5,
          imgUrl: require("../../assets/img/patient_pic.png"),
          name: "乔某人",
          sex: 0,
          age: 52,
          blo:false,
          color:false,
          num: 85854,
        },
        {
          id: 6,
          imgUrl: require("../../assets/img/patient_pic.png"),
          name: "赵某人",
          sex: 1,
          age: 78,
          blo:false,
          color:false,
          num: 85854,
        },
        {
          id: 7,
          imgUrl: require("../../assets/img/patient_pic.png"),
          name: "王某人",
          sex: 1,
          age: 45,
          blo:false,
          color:false,
          num: 85854,
        },
        {
          id: 8,
          imgUrl: require("../../assets/img/huge.jpg"),
          name: "赵先生",
          sex: 1,
          age: 45,
          blo:false,
          color:false,
          num: 85854,
        }
        
      ],
       currentPage3: 1,
    };
  },
  created(){
    this.getpagefun(1,10)
      
  },
  mounted(){
    //我的病人请求
      this.$axios.get("/consultationinfo/detail",{
    params:{
      consultationId:1

    }
        
      })
      .then((res)=>{
          console.log(res.result)
      })
      .catch((error)=>{
        console.log(error)
      })
  },
  methods: {
    getpagefun(page,size){
       this.$axios
            .post("/consultationinfo/patientListByDoctorId",{pageNo:page,pageSize:size})
            .then( (response) =>{ 
               console.log(response.result.list)
                this.porieList=response.result.list

               
               
            })
            .catch( (error)=> {
              console.log(error);
            });
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
         this.getpagefun(val,5)
      },
    del(i) {
      var blo = confirm("确认要删除吗");
      if (blo) {
        this.porieList.splice(i, 1);
      }
    },
    edit(){},
    view(){},
    //选择与反选
    chek(){
        for (let i = 0; i < this.porieList.length; i++) {
          this.porieList[i].blo=!this.porieList[i].blo          
        }
         if(!this.porieList[0].blo){
                for (let i = 0; i < this.porieList.length; i++) {
                this.porieList[i].color=false 
              }
            }
    },
    delcoose(i){
      if(this.porieList[0].blo){
        this.porieList[i].color=!this.porieList[i].color

      }
    },
    delmany(){
    
      var newdel=this.porieList.filter((item)=>{
        return !item.color
      })
      this.porieList=newdel
    }
  },
  computed: {
    search() {
      return this.porieList.filter((item) => {
        return item.name.includes(this.words);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.router-link-active {
  background: #16dcb8;
  padding: 14px 35px;
  margin-left: 20px;

  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  color: white;
  display: inline-block;
  background-image: linear-gradient(to right, #2dc6e1, #14dfba);
}
.el-row {
  margin-bottom: 30px;
}
.bg-purple img {
  width: 90%;
}
.bg-purple p {
  padding: 10px 0;
}
.bg-purple p:last-child i {
  margin: 0 5px;
  color: #16dcb8;
}
.bg-purple p:last-child i:last-child {
  color: red;
}
.grid-content {
  // background: white;
  border-radius: 10px;
}
.bgradius {
  text-align: center;
  margin-top: 10px;
}
.boxShow {
  box-shadow: 0 0 10px #dedede;
  border-radius: 18px;
}
.borders{
  border: 1px solid;
}
.borderser{
  border: 1px solid red;
}

</style>